<template>
  <div class="video-wrap" v-if="videoInfo">
    <div class="video-container-left">
      <div class="video-header">
        <div class="video-title">
          {{ videoInfo.title }}
        </div>
        <div class="video-data">
          <span>播放量: {{ formatCountToStr(videoInfo.viewCount) }}</span>
          <span>上传时间: {{ videoInfo.uploadTime }}</span>
          <span>来源: {{ videoInfo.source }}</span>
        </div>
      </div>
      <div class="video-player">
        <VideoPlayer :options="videoOptions" :mediaId="videoInfo.uvid" :mediaUuid="videoInfo.uuid" :uuid="loginUserInfo.uuid"></VideoPlayer>
      </div>
      <div class="video-interaction">
        <span
          @click="handleLikeVideo"
          :class="videoInfo.hasSupport ? 'supported' : 'support'"
        >
          <SvgIcon iconClass="supported" v-if="videoInfo.hasSupport"></SvgIcon>
          <SvgIcon iconClass="support" v-else></SvgIcon>
          {{ formatCountToStr(videoInfo.likedCount) }}</span
        >
        <span
          @click="handleStarVideo"
          :class="videoInfo.hasStar ? 'stared' : 'star'"
        >
          <i class="el-icon-star-on" v-if="videoInfo.hasStar"></i>
          <i class="el-icon-star-off" v-else></i>
          {{ formatCountToStr(videoInfo.starCount) }}</span
        >
        <span class="share" @click="handleShare">
          <i class="el-icon-share"></i>
          分享</span
        >
      </div>
      <div class="video-desc">
        <div>分类: {{ videoInfo.partitionName }}</div>
        <div>简介: {{ videoInfo.remark }}</div>
        <!-- <div>源链接: </div> -->
        <!-- <a :href="videoInfo.fromUrl" target="_blank" style="text-decoration: underline; color: #00a1d6;">{{ videoInfo.fromUrl}}</a> -->
        <div>标签:</div>
      </div>
      <div class="video-tags">
        <el-tag v-for="(item, index) in videoTags" :key="index" class="tag">
          {{ item.tagName }}</el-tag
        >
      </div>
      <div class="comments">
        <div class="name" style="margin-bottom: 12px">
          {{ videoInfo.commentCount }} 评论
        </div>
        <div class="comment-head">
          <el-tabs @tab-click="handleChangeSortType">
            <el-tab-pane label="按热度排序" name="0"></el-tab-pane>
            <el-tab-pane label="按时间排序" name="1"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="comment-sent">
          <div class="user-avatar">
            <UserAvatar
              :url="loginUserInfo ? loginUserInfo.avatar : ''"
              size="lg"
              :uuid="loginUserInfo ? loginUserInfo.uuid : '0'"
            ></UserAvatar>
          </div>
          <div class="textarea-container">
            <el-input
              type="textarea"
              rows="3"
              placeholder="在这可以发表您的评论"
              v-model="commentContent"
            >
            </el-input>
            <el-button class="comment-submit" @click="handleCommentSubmit"
              >发表评论</el-button
            >
          </div>
        </div>
        <div class="comment-list" v-if="commentPageObj">
          <div
            v-for="(item, index) in commentPageObj.list"
            :key="index"
            class="list-item reply-wrap"
          >
            <div class="user-avatar">
              <UserAvatar
                :url="item.userAvatar"
                size="lg"
                :uuid="item.uuid"
              ></UserAvatar>
            </div>
            <div class="comment-body">
              <div class="user-nickname">
                <router-link
                  :to="{ name: 'account', params: { uuid: item.uuid } }"
                  target="_blank"
                >
                  {{ item.userNickname }}
                </router-link>
              </div>
              <div class="comment-text">
                {{ item.content }}
              </div>
              <div class="comment-info">
                <span class="time">{{ item.createTime }}</span>
                <span class="like" @click="item.hasSupport = !item.hasSupport">
                  <SvgIcon
                    iconClass="supported"
                    v-if="item.hasSupport"
                  ></SvgIcon>
                  <SvgIcon iconClass="support" v-else></SvgIcon>
                </span>
                <span class="reply btn-hover">回复</span>
                <div class="operation">
                  <el-dropdown
                    size="mini"
                    trigger="click"
                    @command="handleCommand"
                  >
                    <span>
                      <i class="el-icon-more"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        command="暂未实现"
                        v-if="item.uuid !== uuid"
                        >加入黑名单</el-dropdown-item
                      >
                      <el-dropdown-item
                        command="暂未实现"
                        v-if="item.uuid !== uuid"
                        >举报</el-dropdown-item
                      >
                      <el-dropdown-item
                        command="暂未实现"
                        v-if="item.uuid === uuid"
                        >删除</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            background
            :hide-on-single-page="commentPageObj.totalPage <= 1"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="commentPageObj.total"
            @current-change="handleCurrentChange"
            style="margin-left: 10px;"
          >
          </el-pagination>
          <div v-if="commentPageObj.total === 0" class="no-more-reply">
            还没有评论
          </div>
        </div>
      </div>
    </div>
    <div class="video-container-right">
      <div class="up-info" v-if="upInfo">
        <UserAvatar
          :url="upInfo.avatar"
          size="md"
          :uuid="upInfo.uuid"
          class="user-avatar"
        ></UserAvatar>
        <div class="up-info-right">
          <router-link
            :to="{ name: 'account', params: { uuid: upInfo.uuid } }"
            target="_blank"
            class="name"
            style="line-height: 40px; height: 40px"
            >{{ upInfo.nickname }}</router-link
          >
          <div>{{ upInfo.personalSign }}</div>
          <el-button
            size="small"
            class="btn"
            :class="upInfo.hasFollowed ? 'unfollow-btn' : 'follow-btn'"
            @click="handleFollow"
          >
            <i
              :class="upInfo.hasFollowed ? 'el-icon-minus' : 'el-icon-plus'"
            ></i>
            {{ upInfo.hasFollowed ? "取消订阅" : "订阅" }}
            <span>
              <span>{{ formatCountToStr(upInfo.fansCount) }}</span>
            </span>
          </el-button>
        </div>
      </div>
      <div class="reco-list" v-if="recommendVideoList">
        <div class="name">相关推荐</div>
        <div
          v-if="recommendVideoList.length === 0"
          style="margin: auto; font-size: 24px"
        >
          暂无相关推荐
        </div>
        <div
          class="video-page-card"
          v-for="(item, index) in recommendVideoList"
          :key="index"
        >
          <div class="card-box">
            <div>
              <VideoCoverRoute
                :url="item.cover"
                width="10vw"
                height="5.6vw"
                :uvid="item.uvid"
              ></VideoCoverRoute>
            </div>
            <div class="card-info">
              <router-link
                :to="{ name: 'video', params: { uvid: item.uvid } }"
                target="_blank"
                class="title"
              >
                {{ item.title }}
              </router-link>
              <div class="up">
                <div>上传人: {{ item.userNickname }}</div>
              </div>
              <div class="count">
                播放量: {{ formatCountToStr(item.viewCount) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-backtop>UP</el-backtop>
  </div>
</template>

<script>
import VideoPlayer from "./VideoPlayer.vue";
import UserAvatar from "@/components/common/UserAvatar.vue";
import VideoCoverRoute from "@/components/common/VideoCoverRoute.vue";
import {
  queryVideoInfoByUvId,
  queryRelativeRecommendVideoList,
} from "@/api/video.js";
import { queryVideoTagsByUvid } from "@/api/tags.js";
import { isLogin } from "@/api/login.js";
import { getUserInfo, getUserInfoByUuid } from "@/api/user.js";
import { formatCount } from "@/utils/date.js";
import { addComment, queryVideoCommentList } from "@/api/comment.js";
export default {
  components: { VideoPlayer, UserAvatar, VideoCoverRoute },
  created() {
    let uvid = this.$route.params.uvid;
    this.init(uvid);
  },
  data() {
    return {
      uuid: null,
      uvid: null,
      videoInfo: null,
      videoTags: [],
      loginUserInfo: null,
      upInfo: null,
      isLogin: false,
      hasSupport: false,
      hasStar: false,
      videoOptions: {
        autoplay: false, //自动播放
        controls: true, //用户可以与之交互的控件
        loop: false, //视频一结束就重新开始
        muted: false, //默认情况下将使所有音频静音
        aspectRatio: "16:9", //显示比率
        preload: "auto",
        fullscreen: {
          options: { navigationUI: "hide" },
        },
        poster: null,
        sources: [],
      },
      commentSortType: "0",
      // 评论输入的内容
      commentContent: "",
      commentPageObj: null,
      // 0:代表视频
      mediaType: 0,
      pageNum: 1,
      pageSize: 10,
      sortRule: "desc",

      recommendVideoList: [],
    };
  },
  methods: {
    init(uvid) {
      this.queryVideoInfo(uvid);
      this.queryVideoTags(uvid);
      this.queryLoginStatus();
    },
    async queryVideoInfo(uvid) {
      queryVideoInfoByUvId(uvid).then((res) => {
        this.videoInfo = res.data;
        this.videoOptions.poster = this.videoInfo.cover;
        this.videoOptions.sources = [
          {
            src: this.videoInfo.url,
            type: "video/mp4",
          },
        ];
        this.uuid = this.videoInfo.uuid;
        this.uvid = this.videoInfo.uvid;
        this.queryUpInfo(this.uuid);
        this.queryCommentList();
        this.queryRecommendList(this.uvid);
      });
    },
    queryUpInfo(uuid) {
      getUserInfoByUuid(uuid).then((res) => {
        this.upInfo = res.data;
      });
    },
    queryVideoTags(uvid) {
      queryVideoTagsByUvid(uvid).then((res) => {
        this.videoTags = res.data;
      });
    },
    async queryLoginStatus() {
      isLogin().then((res) => {
        this.isLogin = res.data;
        this.queryUserInfo();
      });
    },
    queryUserInfo() {
      if (this.isLogin) {
        // 登录状态
        getUserInfo().then((res) => {
          this.loginUserInfo = res.data;
        });
      }
    },
    handleShare() {
      let url = window.location.href;
      navigator.clipboard.writeText(url).then(
        () => {
          this.$message({
            message: "视频地址复制成功",
            type: "success",
            duration: 1500,
          });
        },
        () => {
          this.$message.error("视频地址复制失败");
        }
      );
      return;
    },
    formatCountToStr(count) {
      return formatCount(count);
    },
    handleChangeSortType(tab, event) {
      if (this.commentSortType !== tab.index) {
        this.commentSortType = tab.index;
        this.queryCommentList();
      }
    },
    handleCommentSubmit() {
      // 发表评论
      if (this.isLogin) {
        // 如果是登录状态
        let commentParam = {
          mediaId: this.videoInfo.uvid,
          mediaType: 0,
          content: this.commentContent,
        };
        addComment(commentParam).then((res) => {
          if (res.data === 0) {
            this.$message.error("服务器异常，发送失败");
          } else {
            this.$message({
              message: "发送成功",
              type: "success",
            });
            this.commentContent = "";
            // 评论数量++
            this.videoInfo.commentCount += 1;
            if (this.commentPageObj.isMore === 0) {
              // 如果评论量很少，刷新
              this.queryCommentList();
            }
          }
        });
      } else {
        alert("请先登录");
      }
    },
    queryCommentList() {
      let data = {
        mediaId: this.videoInfo.uvid,
        mediaType: 0,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sortType: this.commentSortType,
        sortRule: this.sortRule,
      };
      queryVideoCommentList(data).then((res) => {
        this.commentPageObj = res.data;
      });
    },
    handleCommand(command) {
      this.$message(command);
    },
    handleLikeVideo() {
      // 点赞视频
      this.videoInfo.hasSupport = !this.videoInfo.hasSupport;
      this.videoInfo.likedCount += this.videoInfo.hasSupport ? 1 : -1;
    },
    handleStarVideo() {
      // 收藏视频
      this.videoInfo.hasStar = !this.videoInfo.hasStar;
      this.videoInfo.starCount += this.videoInfo.hasStar ? 1 : -1;
    },
    handleFollow() {
      // 关注
      this.upInfo.hasFollowed = !this.upInfo.hasFollowed;
      this.upInfo.fansCount += this.upInfo.hasFollowed ? 1 : -1;
    },
    queryRecommendList() {
      // 查询相关推荐
      queryRelativeRecommendVideoList(this.uvid, 20).then((res) => {
        this.recommendVideoList = res.data;
      });
    },
    handleCurrentChange(val) {
      // 入参pageNum修改
      this.pageNum = val;
      this.queryCommentList();
    },
  },
};
</script>
<style lang="scss" scoped>
.video-wrap {
  margin: 10px auto;
  padding-left: 10vw;
  padding-right: 10vw;
  display: flex;
  justify-content: center;
}
.video-container-left {
  width: 50vw;
}
.video-header {
  margin-top: 20px;
}
.video-title {
  font-size: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}
.video-data {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #999;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
  span {
    margin-right: 12px;
  }
}
.video-player {
  margin-bottom: 16px;
  width: 50vw;
}
.video-interaction {
  line-height: 30px;
  height: 36px;
  font-size: 18px;
  color: #505050;
  border-bottom: 1px solid #e5e9f0;
  padding-bottom: 8px;
  margin-left: 10px;
  margin-bottom: 12px;
  span {
    width: 92px;
    margin-right: 18px;
    cursor: pointer;
    white-space: nowrap;
  }
  .supported {
    color: #00a1d6;
  }
  .support:hover {
    color: #00a1d6;
  }
  .stared {
    color: #00a1d6;
  }
  .star:hover {
    color: #00a1d6;
  }
  .share:hover {
    color: #00a1d6;
  }
}
.video-desc {
  // margin-bottom: 12px;
  div {
    margin-bottom: 12px;
  }
}
.video-tags {
  margin-bottom: 12px;
  height: 48px;
  border-bottom: 1px solid #e5e9ef;
  .tag {
    float: left;
    margin: 0 10px 8px 0;
    background-color: #f4f4f4;
    border-radius: 100px;
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #f4f4f4;
    font-size: 14px;
    color: #505050;
  }
}
.user-avatar {
  float: left;
  margin: 7px 0 0 5px;
  position: relative;
}
.textarea-container {
  position: relative;
  margin-left: 85px;
  margin-right: 120px;
}
.comment-submit {
  width: 85px;
  height: 64px;
  position: absolute;
  right: -100px;
  top: 0;
  padding: 4px 15px;
  margin-top: 5px;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  min-width: 60px;
  vertical-align: top;
  cursor: pointer;
  background-color: #00a1d6;
  border: 1px solid #00a1d6;
}
.comment-list {
  margin-top: 20px;
  border-top: 1px solid #e5e9ef;
  .list-item {
    margin-bottom: 10px;
    .comment-body {
      position: relative;
      margin-left: 85px;
      padding: 16px 0 10px 0;
      border-top: 1px solid #e5e9ef;
    }
    .user-nickname {
      font-size: 12px;
      font-weight: bold;
      line-height: 18px;
      padding-bottom: 4px;
      word-wrap: break-word;
      position: relative;
      color: #aaaaaa;
    }
    .comment-text {
      line-height: 20px;
      padding: 2px 0;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .comment-info {
      color: #99a2aa;
      line-height: 14px;
      margin-top: 8px;
      font-size: 14px;
      .time {
        margin-right: 20px;
      }
      .like {
        cursor: pointer;
        margin-right: 20px;
      }
      .btn-hover {
        padding: 0 5px;
        border-radius: 4px;
        margin-right: 15px;
        cursor: pointer;
        display: inline-block;
      }
      .operation {
        position: relative;
        width: 18px;
        float: right;
        margin-top: 5px;
        margin-right: 0;
        span {
          cursor: pointer;
        }
      }
    }
  }
  .no-more-reply {
    color: #99a2aa;
    text-align: center;
    padding: 30px 0;
    font-size: 18px;
  }
}

.video-container-right {
  width: 25vw;
  margin-left: 30px;
  .up-info {
    box-sizing: border-box;
    height: 96px;
    padding-top: 15px;
    padding-bottom: 12px;
    display: -ms-flexbox;
    display: flex;
    .up-info-right {
      float: left;
      margin-left: 13px;
      height: 96px;
      .btn {
        width: 150px;
        color: white;
        font-weight: 600;
        font-size: 14px;
        height: 27px;
        line-height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
      }
      .follow-btn {
        background-color: #00a1d6;
      }
      .unfollow-btn {
        background-color: #99a2aa;
      }
    }
    .name {
      font-size: 14px;
    }
  }
  .video-page-card {
    padding: 6px 0;
    .card-box {
      display: flex;
    }
    .card-info {
      margin-left: 10px;
      .title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-weight: 500;
        padding-right: 12px;
      }
      .up,
      .count {
        margin-top: 5px;
        display: flex;
        align-items: center;
        color: #999;
        line-height: 18px;
        font-size: 14px;
        color: #888888;
      }
    }
  }
}
</style>